import React,{Component} from 'react';


import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";
import {Link} from "react-router-dom";

import {View} from "../component/index";
import {
  FileImageOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import {Select,
  Input,
  Button,
  Modal,
  Popover,
  Tree,
  Table,
  Cascader,
  Upload,
} from "antd";
import moment from "moment";

const { Option } = Select;
const {TreeNode} = Tree;
const { Search,TextArea } = Input;



const style={
  formItem:{
    marginBottom:10,
    alignItems:"center"
  }
};


// 优惠券
@inject(["store"])
@observer
class Coupon extends Component{
  constructor(props){
    super(props);
    this.store = props.store;
    this.coupon = props.store.storeCoupon;

  }
  
  componentDidMount(){
    this.store.navigation({page:"Coupon"});
    console.log(this.data.length);
    if(!this.data.length){
      this.coupon.init();
    }
  }
  
  @computed get height(){return this.store.height;}
  @computed get website(){return this.store.website;}
  @computed get rootPath(){return this.store.rootPath;}

  @computed get loading(){return this.coupon.loading;}
  // 分页数据
  @computed get data() {return toJS(this.coupon.paging.data);}
  // 查询
  @computed get where() {return this.coupon.where;}
  @computed get tid() {return this.coupon.tid;}
  // 分页
  @computed get pagination(){
    return {current:Number(this.coupon.paging.nowPage),total:Number(this.coupon.paging.maxNum),pageSize:Number(this.coupon.paging.num)};
  }


  render(){
    const columns = [
      {title: "编号",dataIndex: "id",width:"10%"},
      {title: "用户ID",dataIndex: "uid",width:"10%"},
      {title: "发布者",dataIndex: "sys",width:"10%",render:text=><span>{["商户","系统"][text]}</span>},
      {title: "优惠范围",dataIndex: "scope",width:"10%",render:text=><span>{["全场","限制品类","单商品","全店"][text]}</span>},
      {title: "已领用",dataIndex: "used",width:"10%"},
      {title: "使用条件",dataIndex: "conditions",width:"10%",render:text=>{
        if(/^-\d+$/.test(text)){
          return <span>{`无条件${text.replace("-","减")}`}</span>;
        }else if(/^\d+-\d+$/.test(text)){
          return <span>{`满${text.replace("-","减")}`}</span>;
        }else if(/^\d+$/.test(text)){
          return <span>{`${text}折`}</span>;
        }
      }},
      {title: "领用截止",dataIndex: "endtime",width:"10%",render:text=>moment.unix(text).format("YYYY-MM-DD")},
      {title:"优惠券时效",dataIndex:"tm",width:" 15%",
        render:(text)=>{
          if(/^\d+-\d+$/.test(text)){//xx时间到xx时间之内  xx：unix时间
            const arr = text.split("-");
            moment.unix(arr[0]).format("YYYY-MM-DD")
            return `${moment.unix(arr[0]).format("YYYY-MM-DD")}至${moment.unix(arr[1]).format("YYYY-MM-DD")}`;
          }else if(/^\d+/.test(text)){
            let tm,sfx;
            if(text>=2592000){
              sfx="月";
              tm=text/2592000;
            }else if(text>=86400){
              sfx="日";
              tm=text/86400;
            }else if(text>=3600){
              sfx="小时";
              tm=text/3600;
            }else if(text>=60){
              sfx="分钟";
              tm=text/60;
            }else{
              sfx="秒";
              tm=text;
            }
            return `领取后${tm}${sfx}内有效`;
          }else{
            return "时间错误";
          }
          let tm = new Date(Number(text)*1000);
          return <span>{tm.getFullYear()}-{tm.getMonth()+1}-{tm.getDate()}</span>;
        }
      },
      {title: "相关操作",width:"15%",key: "form",
        render: (text ,record)=> {
          return(
            <View>
              <Button
                onClick={()=>this.props.history.push(`${this.rootPath}/coupon/edit/${record.id}`)}
                shape="circle"
                title="编辑"
                icon={<EditOutlined />}
              />
              <Button
                onClick={()=>{
                  Modal.confirm({
                    title: "删除",
                    content: "请修改有效时间？",
                    // onOk:()=>this.coupon.delete(record.id),
                    // onCancel() {},
                  });
                }}
                icon={<DeleteOutlined />}
                style={{margin:"0 10px"}}
                type="danger"
                shape="circle"
                title="删除"
              />
            </View>
          );
        } 
      },
    ];
    return(
      <View style={{height:this.height-50,width:"100%",overflow:"hidden",flexDirection:"column"}}>
        <View 
          style={{
            borderBottom:"1px #eee solid",
            height:50,
            alignItems:"center",
            background:"#f2f2f2"
          }}>
          <Select
            defaultValue="0"
            onChange={v=>this.coupon.set("where-field",v)}
            style={{width:"100px",margin:"0 5px"}}
            >
            <Option value="0">选择类型</Option>
            <Option value="tit">商铺名称</Option>
            <Option value="pid">商品编号</Option>
          </Select>
          <Select
            defaultValue="0"
            onChange={v=>this.coupon.set("where-condition",v)}
            style={{width:100,margin:"0 5px"}}
            >
            <Option value="0">选择条件</Option>
            <Option value="=">等于查询</Option>
            <Option value="like">模糊查询</Option>
          </Select>
          <Search
            placeholder="输入查询内容"
            onSearch={value => this.coupon.search(value)}
            style={{ width: 250 }}
            value={this.where.value}
            onChange={(e)=>this.coupon.set("where-value",e.target.value)}
            enterButton
          />
          <Button onClick={()=>this.coupon.init()}  style={{margin:"0 5px 0 20px"}}>所有优惠券</Button>
          <Link to={`${this.rootPath}/coupon/edit`}>
            <Button
              icon={<PlusOutlined />} 
              type="primary"
              style={{margin:"0 5px"}}
              >
              新建优惠券
            </Button>
          </Link>
        </View>
        <Table
          scroll={{y:this.height-180,x:"100%"}}
          loading={this.loading}
          rowKey={record => record.id}
          columns={columns}
          dataSource={this.data}
          pagination={this.pagination}
          onChange={pagination=>this.coupon.page(pagination.current)}
        />
      </View>
    );
  }
}

export default Coupon;